<!-- 左侧导航 -->
<template>
  <div class="leftNavBarPage">
    <div>
    <div class="topNavBar">
      <div class="navBarContainer">
        <div class="loginNameImg">
          <img :src="userInfo.img_url" class="itemImg" v-if="userInfo.img_url">
          <img src="./../../../assets/img/login/loginIcon.png" class="itemImg" v-if="!userInfo.img_url">
          <img src="./../../../../public/img/personal/shiming.png" class="shiming" v-if="msgNode.is_user_status==3">
        </div>
        <div class="loginName">{{userInfo.username}}</div>
        <div class="isPhone">手机已绑定</div>
        <div class="labelBox">
          <!-- <img src="./../../../../public/img/personal/jixiezhu.png" class="jixiezhu"/>
          <img src="./../../../../public/img/personal/jishou.png" class="jishou"/>
          <img src="./../../../../public/img/personal/gongchengzhu.png" class="jixiezhu"/> -->
          <img src="./../../../../public/img/personal/userInfoIcon.png" class="engineeringIcon" v-if="msgNode.is_user_status ==3"/>
          <img src="./../../../../public/img/personal/enterpriseIcon.png" class="engineeringIcon" v-if="msgNode.is_company&&msgNode.is_company ==3"/>
        </div>
        <div class="setCard" @click="business">设置企业名片</div>
        <div class="addMechanics" @click="addMechanics">添加机械</div>
      </div>
    </div>
    <div class="footerNavBar">
      <div class="footerNavBarBox">
      <div class="footerNavBarNameBorder" :class='{activeClass:currentIndex == 1}' @click="currentIndexBtn">个人中心</div>
      <div class="borderFooter"></div>
      <div class="footerNavBarName" :class='{activeClass:currentIndex1 == 2}' @click="currentIndexBtn1">项目管理</div>
      <div class="footerNavBarName" :class='{activeClass:currentIndex2 == 3}' @click="currentIndexBtn2">维护机械</div>
      <div class="footerNavBarName" :class='{activeClass:currentIndex3 == 4}' @click="currentIndexBtn3">服务认证</div>
      <div class="borderTop"></div>
      <div class="footerNavBarNameBorderOne" :class='{activeClass:currentIndex4 == 5}' @click="currentIndexBtn4">账号管理</div>
      </div>
    </div>
    </div>
    <div class="listDataBox">
      <ProjectData v-show="currentIndex == 1"></ProjectData>
      <ProjectManagement v-show="currentIndex1 == 2 "></ProjectManagement>
      <MechanicsData v-show="currentIndex2 == 3"></MechanicsData>
      <Service v-show="currentIndex3 == 4"></Service>
      <Account v-show="currentIndex4 == 5"></Account>
    </div>
  </div>
</template>

<script >
import ProjectData from './ProjectData'
import MechanicsData from './mechanicalMaintenance/MechanicsData'
import ProjectManagement from './projectManagement/ProjectManagement'
import Service from './serviceCertification/Service'
import Account from './Account'
import {getPersonalStatus} from './../../../apis/api.js'
export default {
// import引入的组件需要注入到对象中才能使用
components: {ProjectData,MechanicsData,ProjectManagement,Account,Service},
    props: {
      navBarIndex: String,
    },
  data() {
 // 这里存放数据
    return {
      userInfo:{},
      msgNode:{},//审核信息
      currentIndex:this.navBarIndex, // 个人中心
      currentIndex1:this.navBarIndex,//项目管理
      currentIndex2:this.navBarIndex,//维护机械
      currentIndex3:this.navBarIndex,//服务认证
      currentIndex4:this.navBarIndex,//账号管理
    }
  },
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {
      
},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
  // 添加机械
  addMechanics(){
    this.$router.push({path:'/addMechanics'})
  },
  // 个人中心
  currentIndexBtn(){
    this.currentIndex = 1
    this.currentIndex2 = -1
    this.currentIndex1 = -1
    this.currentIndex3 = -1
    this.currentIndex4 = -1
  },
  // 项目管理
  currentIndexBtn1(){
    this.currentIndex1 = 2
    this.currentIndex = -1
    this.currentIndex2 = -1
    this.currentIndex3 = -1
    this.currentIndex4 = -1
  },
  // 机械维护
  currentIndexBtn2(){
    this.currentIndex = -1
    this.currentIndex2 = 3
    this.currentIndex1 = -1
    this.currentIndex3 = -1
    this.currentIndex4 = -1
  },
  currentIndexBtn3(){
    this.currentIndex3 = 4
    this.currentIndex = -1
    this.currentIndex1 = -1
    this.currentIndex2 = -1
    this.currentIndex4 = -1
  },
  // 账号管理
  currentIndexBtn4(){
    this.currentIndex4 = 5
    this.currentIndex = -1
    this.currentIndex1 = -1
    this.currentIndex2 = -1
    this.currentIndex3 = -1
  },
  business(){
    this.$message.warning('敬请期待！')
  },
  async getPersonalStatus(){
    try {
      let res = await getPersonalStatus()
      if(res.data.result =='1'){
        this.msgNode = res.data.body
      }
    }catch(e){

    }
  }
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
  this.getPersonalStatus()
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.leftNavBarPage{
  display: flex;
}
.topNavBar{
  width: 240px;
  height: 322px;
  background: #fff;
  position: relative;
  padding-bottom: 20px;
}
.navBarContainer{
  height: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  text-align: center;
}
.loginNameImg{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}
.itemImg{
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.shiming{
  width: 79px;
  height: 18px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
}
.loginName{
  width: 230px;
  font-size: 16px;
  color: #333;
  margin: 10px auto 0 auto;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.isPhone{
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
.labelBox{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.jixiezhu{
  width: 51px;
  height: 18px;
  margin-right: 10px;
}
.jishou{
  width: 48px;
  height: 18px;
  margin-right: 10px;
}
.setCard{
  margin: 20px auto 0 auto;
  width: 200px;
  height: 40px;
  line-height: 40px;
  background: #FF7D59;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}
.addMechanics{
  width: 200px;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  border: 1px solid #909399;
  color: #333;
  font-size: 14px;
  text-align: center;
  margin: 20px auto 0 auto;
  cursor: pointer;
}
.footerNavBar{
  margin-top: 20px;
  width: 240px;
  height: 280px;
  line-height: 56px;
  background: #FFFFFF;
}
.footerNavBarBox{
  cursor: pointer;
}
.footerNavBarName{
  font-size: 14px;
  color: #333;
  margin-left: 48px;
}
.footerNavBarNameBorder{
  font-size: 14px;
  color: #333;
  margin-left: 48px;
}
.footerNavBarNameBorderOne{
  font-size: 14px;
  color: #333;
  margin-left: 48px;
}
.borderFooter{
  border-bottom: 1px solid #DCDFE6;
}
.borderTop{
  border-top: 1px solid #DCDFE6;
}
.activeClass {
  color: #ff855b;
  font-size: 14px;
  cursor: pointer;
}
.engineeringIcon{
  width: 61px;
  height: 18px;
  margin-left: 5px;
}
</style>
